
(function(){
	SVG_NS = "http://www.w3.org/2000/svg";

	/**
	 * A drawing board in SVG.
	 * @namespace SVG
	 * @class Board
	 */
	var SVGBoard = G.GClass('SVG', 'Board', G.Base.EventListener);
	SVGBoard.prototype.__init = function(bw, bh, u) {
		this.__Base__EventListener__init();
		this._showGrid = true;
		this._snapGrid = true;
		this._grid = 10;
		this.unit = u || 'mil';
		this._svg = null;
		this._scale = 1;
		this._scaleStep = 0.2;

		this._shapes = [];
		this._symbles = [];

		// Window size
		//this.w = w || '100%';	
		//this.h = h || '100%';

		// Board Size
		this.boardW = bw;
		this.boardH = bh;

		// 10mil/px
		this.w = "100%";
		this.h = "100%";
		

		this.drawMode = null;

		this.undoReduStack = [];
	}

	SVGBoard.prototype.render = function(container) {
		var svg=document.createElementNS(SVG_NS,'svg'); 
		svg.setAttribute("width", this.w);
		svg.setAttribute("height",this.h);
		container.appendChild(svg);
		this._svg = G(svg);

		this.draw_view_board();

		var g = this._create_element('g', { width: '100%', height:'100%', id: 'drawbox'});
		this._svg.em.appendChild(g);

		this._drawBox = G(g);
		this._svg.bind("onresize", this._on_resize, this);
		this._svg.bind("onmousedown", this._on_mouse_down, this);
		this._svg.bind("onmouseup", this._on_mouse_up, this);
		this._svg.bind("onmousemove", this._on_mouse_move, this);
		this._svg.bind("onclick", this._on_click, this);
	}

	SVGBoard.prototype._on_resize = function() {
		var w = this._svg.em.clientWidth;
		var h = this._svg.em.clientHeight;

		var vw = (w / this._scale);
		var vh = (h / this._scale);
		this._viewW = vw;
		this._viewH = vh;

		this._svg._emViewBoard.setAttribute('viewBox', '0 0 w h');
		this._svg.em.setAttribute('viewBox', '0 0 ' + vw + ' ' + vh);
	}

	SVGBoard.prototype.get_width = function() {
		return this.boardW;
	}
	SVGBoard.prototype.get_height = function() {
		return this.boardH;
	}

	SVGBoard.prototype.draw_view_board= function() 
	{
		if (!this._svg)	return;

		var g = this._create_element('g', { width: '100%', height:'100%', id: 'viewboard'});
		var b = this._create_element('rect', { width: '100%', height:'100%'});
		this._emGridBoard = g;
		g.appendChild(b);

		// Draw Grid
		var w = this.get_width();
		var h = this.get_height();
		for (var i = this._grid; i < h; i+=this._grid) {
			var l = this._create_element('line', {x1: 0, y1:i, x2:'100%', y2: i});
			g.appendChild(l);
		}
		for (var i = this._grid; i < w; i+=this._grid) {
			var l = this._create_element('line', {x1: i, y1:0, x2:i, y2: '100%'});
			g.appendChild(l);
		}

		this._svg.em.appendChild(g);

		this._on_resize();

		// Draw Cursor
		var x = this._viewW / 2;
		var y = this._viewH / 2;
		this.cursorH = this._create_element('line', 
				{x1: 0, y1: y, x2: '100%', y2: y, id: 'cursor'});
		this.cursorV = this._create_element('line', 
				{x1: x, y1: 0, x2: x, y2: '100%', id: 'cursor'});
		g.appendChild(this.cursorH);
		g.appendChild(this.cursorV);

	}

	SVGBoard.prototype._create_element = function(typ, attr) {
		if (!this._svg)	return;

		var attr = attr || null;
		var o = document.createElementNS(SVG_NS, typ);
		if (attr) {
			for (var i in attr) {
				o.setAttribute(i, attr[i]);
			}
		}
		return o;
	}

	SVGBoard.prototype.set_grid = function(grid) {
		this._svg.em.removeChild(this._emGridBoard);
		this._grid = grid;
		this.draw_view_board();
	}

	SVGBoard.prototype._snap_to_grid = function(x, y) 
	{
		var x  = Math.round(x / this._grid) * this._grid;
		var y  = Math.round(y / this._grid) * this._grid;
		return {x: x, y: y};
	}

	SVGBoard.prototype._map_mouse_matrix = function(evt)
	{
		var x = evt.offsetX / this._scale;
		var y = evt.offsetY / this._scale;

		return this._snap_to_grid(x, y);
	}

	SVGBoard.prototype.zoom_in = function() 
	{
		this.set_scale(this._scale + this._scaleStep);
	}

	SVGBoard.prototype.zoom_out = function() 
	{
		this.set_scale(this._scale - this._scaleStep);
	}

	SVGBoard.prototype.set_scale = function(scale) 
	{
		if (scale < 1) {
			scale = 1;
		}
		if (scale != this._scale) {
			this._scale = scale;
			this._on_resize();
		}
	}


	SVGBoard.prototype.set_unit = function(unit) 
	{
	}

	SVGBoard.prototype.add_shape = function() 
	{
	}

	SVGBoard.prototype.del_shape = function() 
	{
	}
	SVGBoard.prototype.add_symbol = function() 
	{
	}
	SVGBoard.prototype.del_symbol = function() 
	{
	}

	SVGBoard.prototype.move_cursor = function(x, y)
	{
		this.cursorV.setAttribute('x1', x);
		this.cursorV.setAttribute('x2', x);
		this.cursorH.setAttribute('y1', y);
		this.cursorH.setAttribute('y2', y);
	}

	/*
	 * Mouse Event handlers
	 */
	SVGBoard.prototype._on_mouse_down = function(ev) {
		if (!this.drawMode)		return;
		this._map_mouse_matrix(ev);
		var p = this._map_mouse_matrix(ev);
		this.drawMode.onmousedown.call(this, ev, p);
	}
	SVGBoard.prototype._on_mouse_move = function(ev) 
	{

		var p = this._map_mouse_matrix(ev);
		this.move_cursor(p.x, p.y);

		if (!this.drawMode)		return;
		this.drawMode.onmousemove.call(this, ev, p);
	}
	SVGBoard.prototype._on_mouse_up = function(ev) {
		if (!this.drawMode)		return;
		var p = this._map_mouse_matrix(ev);
		this.drawMode.onmouseup.call(this, ev, p);
	}
	SVGBoard.prototype._on_click = function(ev) 
	{
		if (!this.drawMode)		return;

		var p = this._map_mouse_matrix(ev);
		this.move_cursor(p.x, p.y);

		var p = this._map_mouse_matrix(ev);
		this.drawMode.onclick.call(this, ev, p);
	}


	SVGBoard.prototype.draw_line= function() {
		this.drawMode = this._DrawMode['lineclick'];
		this.drawMode.init.call(this);
	}

	SVGBoard.prototype.draw_select_mode = function() {
		this.drawMode = null;
	}


	G.DOM.Element.prototype.SVGBoard = function(w, h) {
		var board = new SVGBoard(w, h);
		board.render(this.em);
		return board;
	}


	/**
	 * @namespace SVG
	 * @class Shape
	 */
	Shape = G.GClass('SVG', 'Shape', G.Base.EventListener);
	Shape.prototype.__init = function(board, x, y) {
		this.x = x || 0;
		this.y = y || 0;
	}

 })();

